<template>
    <div id="calendarRef"  style="height: 100%"></div>
  </template>
  <script setup>
  import Calendar from '@toast-ui/calendar'
  import '@toast-ui/calendar/dist/toastui-calendar.min.css'
  import { onMounted } from 'vue'
  import dayjs from 'dayjs'
   
  let calendar = null
  let canlendarList = [{ // 测试数据
      id: 0,
      start: '2024-02-22 09:20',
      end: '2024-02-22 10:20'
  }]
   
  function init() {
    const options = { // 配置项
      defaultView: 'week',
      isReadOnly: true,
      week: {
        startDayOfWeek: 1,
        taskView: false,
        showNowIndicator: false,
        workweek: false,
        hourStart: 5,
        eventView: ['time'],
        dayNames: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      },
      template: {
        time(title) { // 模板显示内容
          return `${dayjs(title.start).format('HH:mm')} -         
                  ${dayjs(title.end).format('HH:mm')}`
        },
        timegridDisplayPrimaryTime({ time }) { //左边时间显示内容
          return `${dayjs(time).format('HH:mm')}`
        }
      }
    }
    calendar = new Calendar('#calendarRef', options) //实例
  }
   
  function createdCalendar() {// 创建数据
    canlendarList.map((m) => {
      calendar.createEvents([ // 这里看官网文档
        {
          id: m.id,
          calendarId: m.id,
          start: dayjs(m.start).format('YYYY-MM-DD HH:mm:ss'),
          end: dayjs(m.end).format('YYYY-MM-DD HH:mm:ss'),
          color: '#3c056d',
          backgroundColor: '#3c056d',
          borderColor: '#B92E47',
          dragBackgroundColor: '#B92E47',
          ...m
        }
      ])
    })
  }
   
  onMounted(async () => {
      init()
      createdCalendar()
  })
  </script>